<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />

        <script type="text/javascript" src="../jquery-1.11.3.js"></script>

        <script type="text/javascript">
        function f1(){
            //$(s1 s2)[父子]
            //$('div span').css('background-color','blue');

            //$(s1 > s2) [父子](直接孩子，孙子不算)
            //$('div > span').css('background-color','green');//张飞 关羽

            //$(s1 + s2) [兄弟]第一个兄弟紧紧挨着的
            //$('div + span').css('background-color','red');

            //$(s1 ~ s2)[兄弟]全部兄弟
            $('div ~ span').css('background-color','brown');
        }
        </script>
    </head>
    <body>
        <h2>层次选择器</h2>
        <div>
            <span>张飞</span>
            <p>
                <span>赵云</span>
            </p>
            <span>关羽</span>
        </div>
        <p>lkls</p>
        <span>曹操</span>
        <p>吕布</p>
        <span>孙权</span>
        <div>小乔</div>
        <span>大乔</span>

        <input type="button" value="触发" onclick="f1()" />
    </body>
</html>